<template>
    <div>
        <div class="card-body">
            <div class="card-box">
                <el-icon class="card-icon bg1">
                    <User />
                </el-icon>
                <div class="card-content">
                    <!-- <countup class="card-num color1" :end="6666" /> -->
                    <div class="useStyle">用户名</div>
                    <div>{{data?.username}}</div>
                </div>
            </div>
            <div class="card-box">
                <el-icon class="card-icon bg2">
                    <ChatDotRound />
                </el-icon>
                <div class="card-content">
                    <!-- <countup class="card-num color2" :end="168" /> -->
                    <div class="useStyle">IP</div>
                    <div>{{data?.loginip}}</div>
                </div>
            </div>
            <div class="card-box">
                <el-icon class="card-icon bg3">
                    <Goods />
                </el-icon>
                <div class="card-content">
                    <!-- <countup class="card-num color3" :end="8888" /> -->
                    <div class="useStyle">余额</div>
                    <div>{{data?.money}}</div>
                </div>
            </div>
            <div class="card-box">
                <el-icon class="card-icon bg4">
                    <ShoppingCartFull />
                </el-icon>
                <div class="card-content">
                    <!-- <countup class="card-num color4" :end="999" /> -->
                    <div class="useStyle">登录时间</div>
                    <div>{{data?.logintime}}</div>
                </div>
            </div>
        </div>
        <br>
        <div class="card-body">
            <div class="card-box">
                <el-icon class="card-icon bg5">
                    <Clock />
                </el-icon>
                <div class="card-content">

                    <div class="useStyle">今日新增人数</div>
                    <div>{{data?.today_num}}</div>
                </div>
            </div>
            <div class="card-box">
                <el-icon class="card-icon bg6">
                    <Clock />
                </el-icon>
                <div class="card-content">

                    <div class="useStyle">7日新增人数</div>
                    <div>{{data?.seven_days_num}}</div>
                </div>
            </div>
            <div class="card-box">
                <el-icon class="card-icon bg7">
                    <Clock />
                </el-icon>
                <div class="card-content">
                    <div class="useStyle">30日新增人数</div>
                    <div>{{data?.thirty_days_num}}</div>
                </div>
            </div>
            <div class="card-box">
                <el-icon class="card-icon bg8">
                    <Clock />
                </el-icon>
                <div class="card-content">

                    <div class="useStyle">总人数</div>
                    <div>{{data?.sum_num}}</div>
                </div>
            </div>
        </div>
        <br>
        <!-- <div class="card-body">
            <div class="card-box">
                <el-icon class="card-icon bg9">
                    <Clock />
                </el-icon>
                <div class="card-content">
                    <div class="useStyle">代理模式</div>
                    <div>{{data?.agent_method_text}}</div>
                </div>
            </div>
            <div class="card-box">
                <el-icon class="card-icon bg10">
                    <Clock />
                </el-icon>
                <div class="card-content">
                    <div class="useStyle">返佣比例(%)</div>
                    <div>{{data?.rebate_rate}}</div>
                </div>
            </div>
            <div class="card-box">
            </div>
            <div class="card-box">
            </div>
        </div> -->

    </div>
</template>

<script setup lang="ts" name="dashboard">
    import { ref, reactive, onMounted, nextTick } from 'vue';
    import countup from '@/components/countup.vue';
    import { use, registerMap } from 'echarts/core';
    import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
    import {
        GridComponent,
        TooltipComponent,
        LegendComponent,
        TitleComponent,
        VisualMapComponent,
    } from 'echarts/components';
    import { CanvasRenderer } from 'echarts/renderers';
    import VChart from 'vue-echarts';
    import { dashOpt1, dashOpt2, mapOptions } from './chart/options';
    import chinaMap from '@/utils/china';
    import { useInfo } from '@/store/tabs';
    import { useSidebarStore } from '@/store/sidebar';
    import { agentInfo } from '@/api';
    use([
        CanvasRenderer,
        BarChart,
        GridComponent,
        LineChart,
        PieChart,
        TooltipComponent,
        LegendComponent,
        TitleComponent,
        VisualMapComponent,
        MapChart,
    ]);
    const sidebar = useSidebarStore();
    const isMobile = () => {
        return navigator.userAgent.match(/(phone|Android|iPhone|Mobile)/i);
    };
    onMounted(() => {


    });
    // 注册地图

    registerMap('china', chinaMap);

    // let userInfo = infoState.getInfo()
    // 定义接口
    interface UserData {
        username?: string,
        loginip?: string,
        money?: string,
        logintime?: string,
        today_num?: Number,
        seven_days_num?: Number,
        thirty_days_num?: Number,
        sum_num?: Number,
        agent_method_text?: string,
        rebate_rate?: string,

    }
    let data = ref < UserData > ({});

    // let infoStore = useInfo()
    // data.value = infoStore.userInfo


    const getUserInfo = async () => {
        let res = await agentInfo()
        if (res.code == 1) {
            data.value = res.data
            localStorage.setItem('agent', res.data.agent_method);
        }
    }
    getUserInfo()
</script>

<style>

</style>
<style scoped>
    .card-content {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
        padding: 0 20px;
    }

    .card-num {
        font-size: 30px;
    }

    .card-icon {
        font-size: 50px;
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        color: #fff;
    }

    .bg1 {
        background: #2d8cf0;
    }

    .bg2 {
        background: #64d572;
    }

    .bg3 {
        background: #f25e43;
    }

    .bg4 {
        background: #e9a745;
    }

    .color1 {
        color: #2d8cf0;
    }

    .color2 {
        color: #64d572;
    }

    .color3 {
        color: #f25e43;
    }

    .color4 {
        color: #e9a745;
    }

    .bg5 {
        background: #f05e6b;
    }

    .bg6 {
        background: #229231;
    }

    .bg7 {
        background: #dad733;
    }

    .bg8 {
        background: #f1afee;
    }

    .bg9 {
        background: #7cdcf0
    }

    .bg10 {
        background: #1f8189
    }

    .chart {
        width: 100%;
        height: 400px;
    }

    .card-header {
        padding-left: 10px;
        margin-bottom: 20px;
    }

    .card-header-title {
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .card-header-desc {
        font-size: 14px;
        color: #999;
    }

    .timeline-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        color: #000;
    }

    .timeline-time,
    .timeline-desc {
        font-size: 12px;
        color: #787878;
    }

    .rank-item {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .rank-item-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #f2f2f2;
        text-align: center;
        line-height: 40px;
        margin-right: 10px;
    }

    .rank-item-content {
        flex: 1;
    }

    .rank-item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #343434;
        margin-bottom: 10px;
    }

    .rank-item-desc {
        font-size: 14px;
        color: #999;
    }

    .map-chart {
        width: 100%;
        height: 350px;
    }

    .useStyle {
        font-size: 20px;
        font-weight: 800;
        color: #f05e6b;
        font-family: 'Courier New', Courier, monospace;
        margin-bottom: 10px;
    }

    .card-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .card-body1 {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .card-box {
        width: 24%;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;


    }

    @media (max-width: 600px) {
        .card-box {
            width: 100%;
            margin: 6px 0;
        }
    }
</style>